@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .c-overflow-y-auto {
    @apply overflow-y-auto;
    scrollbar-gutter: stable;
  }

  .c-btn-hover {
    @apply relative overflow-hidden inline-flex flex-row items-center justify-center cursor-pointer;
  }

  .c-btn-hover::after {
    content: "";
    background: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.3) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    transition: 0.6s ease;
    left: -200%;
    height: 200%;
    width: 200%;
    pointer-events: none;
    @apply absolute top-0;
  }

  .c-btn-hover:hover::after {
    left: 200%;
  }

  .text-fill-color {
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
